<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import Sidebar from './components/layout/Sidebar.vue'
import Header from './components/layout/Header.vue'

// 移动端菜单状态
const showMobileMenu = ref(false)
</script>

<template>
  <div class="min-h-screen bg-warm-50">
    <!-- 移动端菜单遮罩 -->
    <div v-if="showMobileMenu"
         class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
         @click="showMobileMenu = false"></div>

    <!-- 主布局容器 -->
    <div class="flex h-screen">
      <!-- 左侧导航栏 -->
      <div :class="[
        'flex-shrink-0 relative transition-transform duration-300 ease-in-out z-50',
        'w-64 xl:w-72 2xl:w-80 3xl:w-88 4xl:w-96 lg:translate-x-0',
        showMobileMenu ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
      ]">
        <Sidebar />
      </div>

      <!-- 右侧主内容区域 -->
      <div class="flex-1 flex flex-col overflow-hidden lg:ml-0"
           :class="{ 'ml-0': !showMobileMenu }">
        <!-- 顶部导航栏 -->
        <Header @toggle-mobile-menu="showMobileMenu = !showMobileMenu" />

        <!-- 主内容区域 -->
        <main class="flex-1 overflow-y-auto bg-warm-50 px-2 py-3 sm:px-3 sm:py-4 lg:px-4 lg:py-6 xl:px-6 xl:py-6 2xl:px-8 2xl:py-8">
          <div class="w-full max-w-none">
            <RouterView />
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 确保布局在不同屏幕尺寸下的响应式表现 */
@media (max-width: 768px) {
  .w-64 {
    width: 16rem;
  }
}

@media (max-width: 640px) {
  .w-64 {
    width: 14rem;
  }
}
</style>
